<% content_for "header" do %>
<title><%= playlist.title %> - Invidious</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/playlist/<%= plid %>" />
<% end %>

<div class="pure-g">
    <div class="pure-u-1 pure-u-lg-1-5"></div>
    <div class="pure-u-1 pure-u-lg-3-5">
        <div class="h-box">
            <form class="pure-form pure-form-aligned" action="/add_playlist_items" method="get">
                <legend><a href="/playlist?list=<%= playlist.id %>"><%= translate(locale, "Editing playlist `x`", %|"#{HTML.escape(playlist.title)}"|) %></a></legend>

                <fieldset>
                    <input class="pure-input-1" type="search" name="q"
                      <% if query %>value="<%= HTML.escape(query.text) %>"<% end %>
                      placeholder="<%= translate(locale, "Search for videos") %>">
                    <input type="hidden" name="list" value="<%= plid %>">
                </fieldset>
            </form>
        </div>
    </div>
    <div class="pure-u-1 pure-u-lg-1-5"></div>
</div>

<script id="playlist_data" type="application/json">
<%=
{
    "csrf_token" => URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "")
}.to_pretty_json
%>
</script>
<script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>

<div class="pure-g">
    <% videos.each_slice(4) do |slice| %>
            <% slice.each do |item| %>
                <%= rendered "components/item" %>
            <% end %>
    <% end %>
</div>

<script src="/js/watched_indicator.js"></script>

<% if query %>
    <%- query_encoded = URI.encode_www_form(query.text, space_to_plus: true) -%>
    <div class="pure-g h-box">
        <div class="pure-u-1 pure-u-lg-1-5">
            <% if query.page > 1 %>
                <a href="/add_playlist_items?list=<%= plid %>&q=<%= query_encoded %>&page=<%= page - 1 %>">
                    <%= translate(locale, "Previous page") %>
                </a>
            <% end %>
        </div>
        <div class="pure-u-1 pure-u-lg-3-5"></div>
        <div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
            <% if videos.size >= 20 %>
                <a href="/add_playlist_items?list=<%= plid %>&q=<%= query_encoded %>&page=<%= page + 1 %>">
                    <%= translate(locale, "Next page") %>
                </a>
            <% end %>
        </div>
    </div>
<% end %>
